

export const addNotification = (editor) => {
    const {
        Components
    } = editor;
    Components.addType('addNotification', {
        model: {
            defaults: {
                name: 'addNotification',
                droppable: true,
                attributes: {
                    speed:'20',//滚动20秒/轮
                    'data-gjs-type':'addNotification'
                },
                traits: [
                    {
                        type: 'text',  
                        label: '标题',  
                        name: 'title',  
                      },  
                      {  
                        type: 'text',  
                        label: 'id',  
                        name: 'id'
                      },
                      {
                        type: 'number',
                        name: 'speed',
                        label:'滚动速度(毫秒/帧)',
                        changeProp:1,
                        default: '20',//秒
                      },
                ],
                components: [{
                    type: 'div',
                    attributes: {
                        class: 'box'
                    },
                    components: [{
                        type:'div',
                        attributes: {
                            class: 'animate'
                        },
                        components: [{
                            type:'text',
                            attributes: {
                                class: 'animate-font'
                            },
                            content:`网页编辑器-横向广告栏`
                        }],
                    }],
                }],
                script() {
                    var thx = document.getElementById(this.attributes.id.value);
                    thx.getElementsByClassName('animate')[0].style.animationDuration = `${this.attributes.speed.value}s`;
                },
                styles: `
                .box {
                    width: 100%;
                    margin: 0 auto;
                    overflow: hidden;
                    text-align:left;
                }

                .animate {
                    margin: 20px 0;
                    width:100%;
                    animation: 15s wordsLoop linear infinite normal;
                }
                .animate-font{
                    font-size: 25px;
                    color: black;
                    display: inline-block;
                    white-space: nowrap;
                }
                @keyframes wordsLoop {
                    0% {
                        transform: translateX(100%);
                        -webkit-transform: translateX(100%);
                    }
                    100% {
                        transform: translateX(-100%);
                        -webkit-transform: translateX(-100%);
                    }
                }

                @-webkit-keyframes wordsLoop {
                    0% {
                        transform: translateX(200%);
                        -webkit-transform: translateX(200%);
                    }
                    100% {
                        transform: translateX(0);
                        -webkit-transform: translateX(0);
                    }
                `},
                init() {
                    let that = this;
                    // 滚动速率
                    that.on('change:speed', function() {
                        that.get('attributes').speed = that.attributes.speed
                        // 回调script
                        that.trigger("change:script");
                    });  
                },
        }
    });

    // 注册组件
    editor.BlockManager.add('add-notification', {
        label: '横向广告栏',
        category: '其他类',
        media: `<svg t="1720776677569" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25904" width="30" height="30"><path d="M393.707 292.571L343.14 487.62l46.956 234.78-97.524-45.15-66.821-108.36-21.672-86.688 66.821-113.778zM451.5 509.291a104.748 61.404 90 1 0 122.807 0 104.748 61.404 90 1 0-122.808 0z" p-id="25905"></path><path d="M426.215 781.996c-3.612 0-7.224-1.806-10.836-3.612l-117.39-86.687c-36.12-23.478-65.015-57.792-83.075-99.33-10.836-25.284-16.254-52.374-16.254-81.27s5.418-55.986 16.254-81.27c16.254-41.538 45.15-74.046 83.075-97.524l110.166-77.657c9.03-5.418 19.866-3.612 25.284 3.611 5.418 9.03 3.612 19.866-3.612 25.284L319.661 361.2c-32.508 19.866-55.986 48.762-70.433 81.27-9.03 21.672-14.448 45.15-14.448 68.628s3.612 45.15 12.642 66.822c14.447 34.314 37.925 63.21 68.627 83.076l117.39 86.688c7.224 5.418 9.03 18.06 3.612 25.283 0 5.418-5.418 9.03-10.836 9.03z" p-id="25906"></path><path d="M523.739 830.758c-108.36 0-193.242-140.867-193.242-317.855S415.38 193.242 523.74 193.242c25.284 0 50.568 7.224 74.046 23.478 9.03 5.418 10.836 16.254 5.418 25.284s-16.254 10.836-25.284 5.418c-18.06-10.836-34.314-18.06-54.18-18.06-84.882 0-157.122 130.031-157.122 281.735s72.24 283.541 157.122 283.541 157.122-130.031 157.122-281.735c0-74.046-16.254-146.286-46.956-198.66-5.418-9.03-1.806-19.866 7.224-25.284 9.03-5.418 19.866-1.806 25.284 7.224 32.508 59.598 50.568 135.45 50.568 216.72 1.806 176.988-83.076 317.855-193.242 317.855z" p-id="25907"></path><path d="M523.739 646.547c-48.762 0-86.688-59.598-86.688-133.644s37.926-133.644 86.688-133.644 86.688 59.598 86.688 133.644-37.926 133.644-86.688 133.644z m0-232.974c-23.478 0-50.568 39.732-50.568 97.524s27.09 97.524 50.568 97.524 50.568-39.732 50.568-97.524-27.09-97.524-50.568-97.524z" p-id="25908" ></path><path d="M523.739 413.573h-1.806l-92.106-10.836c-9.03-1.806-16.254-10.836-16.254-19.866 1.806-9.03 10.836-16.254 19.866-16.254l92.106 10.836c9.03 1.806 16.254 10.836 16.254 19.866s-9.03 16.254-18.06 16.254zM372.035 662.801c-9.03 0-16.254-7.224-18.06-16.254-1.806-9.03 5.418-18.06 16.254-19.866l153.51-16.254c9.03-1.806 18.06 5.418 19.866 16.254 1.806 9.03-5.418 18.06-16.254 19.866L373.841 662.8h-1.806zM763.937 364.811c-5.418 0-9.03-1.806-12.642-5.418-7.224-7.224-7.224-18.06 0-25.284l25.283-25.284c7.224-7.224 18.06-7.224 25.284 0s7.224 18.06 0 25.284l-25.284 25.284c-3.612 3.612-9.03 5.418-12.641 5.418z m7.223 355.782c-5.417 0-9.03-1.806-12.641-5.418l-25.284-25.284c-7.224-7.224-7.224-18.06 0-25.284s18.06-7.224 25.284 0l25.283 25.284c7.224 7.224 7.224 18.06 0 25.284-3.612 3.612-7.224 5.418-12.642 5.418z m48.762-191.436h-54.18c-10.835 0-18.06-7.224-18.06-18.06s7.225-18.06 18.06-18.06h54.18c10.836 0 18.06 7.224 18.06 18.06s-9.03 18.06-18.06 18.06z" p-id="25909"></path></svg>`,
        content: {
            type: 'addNotification'
        },
    });
};